<!-- 材料数据库 -->
<template>
  <!-- 顶部搜索区 -->
  <div class="main-app" v-loading="loading">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 5px; margin-bottom: 15px;">
      <el-breadcrumb-item :to="{path:'/'}">{{$t('common.nav.home')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('common.nav.materialDatabase')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--数值统计区域-->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="box-card">
          <el-row :gutter="20">
            <el-col :span="22">
              <div class="titie-bar"><span>{{$t('common.title.materialProjectStatistics')}}</span></div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain @click="operation($t('common.button.startExploringMaterials'))">{{$t('common.button.startExploringMaterials')}}</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--数值统计区域-->
    <div style="margin-top: 1%;">
      <el-row :gutter="4">
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-1">
            <div class="statistics-titie"><span>MATERIALS</span></div>
            <div class="statistics-number"><span>154,718</span></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-2">
            <div class="statistics-titie"><span>REGISTERED USERS</span></div>
            <div class="statistics-number"><span>385,000+</span></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-3">
            <div class="statistics-titie"><span>INTERCALATION<br/>ELECTRODER</span></div>
            <div class="statistics-number"><span>4,315</span></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-4">
            <div class="statistics-titie"><span>CITATIONS</span></div>
            <div class="statistics-number"><span>19,000+</span></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-5">
            <div class="statistics-titie"><span>MOLECULES</span></div>
            <div class="statistics-number"><span>172,874</span></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-panal statistics-panal-bg-6">
            <div class="statistics-titie"><span>CPU HOURS/YEAR</span></div>
            <div class="statistics-number"><span>172,874</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--数据统计折线图区域-->
    <div style="margin-top: 1%;">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover" class="box-card">
            <div class="titie-bar"><span>{{$t('common.title.databaseEntries')}}</span></div>
            <chartdatabase id="container" style="width: 100vm; height: 45vh;"></chartdatabase>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  OperationRecordList
} from "../../api/record.js";
import chartdatabase from "./ChartDatabase.vue";
export default {
  // 页面公共变量
  data() {
    return {

    };
  },
  // 页面创建完成事件
  async created() {
    await this.init();
  },
  // 引用组件
  components: {
    chartdatabase
  },
  // 页面相关方法
  methods: {
    // 初始化加载事件
    async init() {
      this.loading = true;        // 启动加载框

      // // 获取数据
      // const { data, count } = await OperationRecordList({
      //   page: this.currentPage,
      //   limit: this.pageSize,
      //   Name: this.searchParam.name,
      //   Content: this.searchParam.content
      // });

      this.loading = false;       // 关闭加载框
    },
    // 操作功能按钮点击事件
    operation(value) {
      switch (value) {
        // 开始探索材料
        case this.$t('common.button.startExploringMaterials'):
          this.$router.push(`material_database/list`);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.titie-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: rgba(61, 171, 175, 1);
  margin: 5px 0 5px 0;
}
.titie-bar span {
  color: #0A0A0A;
  width: 80px;
  font-size: 22px;
  line-height: 32px;
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-left: 15px;
}
.statistics-panal {
  width: 14vw;
  height: 22vh;
  border-radius: 8px;
  box-shadow: 0px 2px 6px 0px rgba(39, 122, 160, 0.09);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.statistics-panal-bg-1 {
  background-image: url(../../assets/icon/material_database/panal_1.png);
}
.statistics-panal-bg-2 {
  background-image: url(../../assets/icon/material_database/panal_2.png);
}
.statistics-panal-bg-3 {
  background-image: url(../../assets/icon/material_database/panal_3.png);
}
.statistics-panal-bg-4 {
  background-image: url(../../assets/icon/material_database/panal_4.png);
}
.statistics-panal-bg-5 {
  background-image: url(../../assets/icon/material_database/panal_5.png);
}
.statistics-panal-bg-6 {
  background-image: url(../../assets/icon/material_database/panal_6.png);
}
.statistics-titie {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(61, 171, 175, 1);
  margin: 25px 0 0 20px;
  display: flex;
  flex-direction: column;

  span {
    color: #0A0A0A;
    font-size: 22px;
    white-space: nowrap;
    overflow-wrap: break-word;
    margin-top: -5px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
}
.statistics-number {
  text-align: center;
  margin-top: 26%;
  display: flex;
  flex-direction: column;

  span {
    color: rgba(1, 107, 110, 1);
    font-size: 48px;
    white-space: nowrap;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
  }
}
</style>
